<!--
- File:    博客首页.
-->
<template>
  <div class="Web_Box">
    <div class="myhome_top f-cb">
      <div class="homeimg">
        <div class="homeheah">
          <img :src="memberInfo.member_avatar ? $config.imgsite + $config.avatarSrc + memberInfo.member_avatar : defaultAvatar">
        </div>
      </div>
      <h2 class="home_name">{{memberInfo.member_name}}</h2>
      <div class="homelist fl">
        <ul class="f-cb">
          <li>
            <p class="h_num">{{memberInfo.thumb_up}}</p>
            <span class="h_tit">赞</span></li>
          <li @click="gotoFollowList">
            <p class="h_num">{{memberInfo.follow_num}}</p>
            <span class="h_tit">关注</span></li>
          <li @click="gotoFansList">
            <p class="h_num">{{memberInfo.fans_num}}</p>
            <span class="h_tit">粉丝</span></li>
        </ul>
      </div>
      <div class="follow_btn fr" v-if="!self">
        <a @click="addFollow" v-if="!memberInfo.is_follow">关注</a>
        <a @click="showSheet2" v-else>已关注</a>
      </div>
    </div>
    <div>
      <ul>
        <li class="Release f-cb">
          <router-link class="rbtn" :to="{name: 'diary-add'}"> <i class="iconfont icon-xinqing"></i>发布遇见</router-link>
          <router-link class="rbtn2" :to="{name: 'article-add'}"><i class="iconfont icon-xing"></i>发布育花缘</router-link>
        </li>
      </ul>
    </div>
    <div class="mt10">
      <div class="ency_tab bg_fff">
        <div class="Tabs2">
          <ul>
            <li :class="{'on': showType == '0'}" @click="switchShowType('0')">遇见</li>
            <li :class="{'on': showType == '1'}" @click="switchShowType('1')">育花缘</li>
          </ul>
        </div>
      </div>
      <div class="ProList" v-show="showType == '0'"
        v-infinite-scroll="loadMoreDiary"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class=" bg_fff mb10 " v-for="diary in diaryList.data">
          <div class="diary_block f-cb">
            <div class="time fl" style="width: 2.1rem">
              <p class="datas">{{diary.add_time | timestampToDate('dd')}}</p>
              <p class="month">{{diary.add_time | timestampToDate('MM')}}月</p>
            </div>
            <div v-if="self" class="fr homeedit" @click="delDiary(diary.id)"><i class="iconfont icon-del3"></i></div>
            <div class="diarycont fl">
              <ul class="f-cb" v-if="diary.images && diary.images.length>0">
                <li v-for="(img, imgIndex) in diary.images" @click="showImg(diary.imgList, imgIndex)">
                  <img :src="$config.imgsite + $config.uploadImgSrc + img + '_w200'"></li>
              </ul>
              <p class="d_coint" v-show="diary.content">{{diary.content}}</p>
            </div>
          </div>
          <!--<div class="position">福州市</div>-->
        </div>
        <loading-more :allLoaded="diaryList.allLoaded" :show="diaryList.data.length > 0"></loading-more>
        <empty-data :show="diaryList.allLoaded && diaryList.data.length <= 0" style="margin-top: 5rem"></empty-data>
      </div>
      <div class="ProList" v-show="showType == '1'"
        v-infinite-scroll="loadMoreArticle"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="articles_list f-cb" v-for="article in articleList.data">
          <div v-if="self" class="fr homeedit" @click="showSheet(article)"><i class="iconfont icon-bianji"></i></div>
          <div class="art_tit slh" @click="gotoArticleDetail(article.id, article.is_sys)">{{article.title}}</div>
          <div class="author">
            <span class="au_img"><img :src="$config.imgsite + $config.avatarSrc + article.member_avatar + '_w150'"></span><span class="au_name">{{article.member_name}}</span><span class="au_time fr">{{article.add_time | timestampToDate('yyyy-MM-dd')}}</span>
          </div>
        </div>
        <loading-more :allLoaded="articleList.allLoaded" :show="articleList.data.length > 0"></loading-more>
        <empty-data :show="articleList.allLoaded && articleList.data.length <= 0" style="margin-top: 5rem"></empty-data>
      </div>
    </div>
    <footer-tab></footer-tab>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <mt-actionsheet
      :actions="actions2"
      v-model="sheetVisible2">
    </mt-actionsheet>
  </div>
</template>

<script>
  import {Actionsheet} from 'mint-ui'
  import {mapModules} from 'vuet'
  import {imgPreview} from '../../components/previewer'

  export default{
    mixins: [
      mapModules({articleTmp: 'articleTmp'})
    ],
    data() {
      return {
        memberId: this.$route.query.member || this.$storage.getMemberInfo().member_id,
        showType: this.$route.query.showType || '0', // 0 心情日记， 1 文章
        defaultAvatar: require('../../assets/images/avatar.png'),
        self: false, // 是否本人（控制编辑删除权限）
        memberInfo: {},
        diaryList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        articleList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentEditArticle: null,
        sheetVisible: false,
        actions: [{
          name: '编辑',
          method: this.gotoEditArticle
        }, {
          name: '删除',
          method: this.delArticle
        }],
        sheetVisible2: false,
        actions2: [{
          name: '取消关注',
          method: this.delFollow
        }]
      }
    },
    components: {
      'mt-actionsheet': Actionsheet
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.self = this.memberId == this.$storage.getMemberInfo().member_id
      this.getMemberInfo(this.memberId)
      this.getDiaryList(this.diaryList.page, this.diaryList.pageSize)
      this.getArticleList(this.articleList.page, this.articleList.pageSize)
    },
    methods: {
      showSheet(article) {
        this.currentEditArticle = article
        this.sheetVisible = true
      },
      showSheet2() {
        this.sheetVisible2 = true
      },
      switchShowType(type) {
        this.showType = type
        this.$router.replace({name: 'blog-index', query: {member: this.memberId, showType: type}})
      },
      gotoArticleDetail(id, isSys) {
        if (isSys == '0') { // 手机端发布的文章
//          this.$router.push({name: 'article-detail', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail/' + id // ios微信分享要如此跳转后才能正确分享
        }
        if (isSys == '1') { // 后台发布的文章
//          this.$router.push({name: 'article-detail2', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail2/' + id // ios微信分享要如此跳转后才能正确分享
        }
      },
      gotoFollowList() {
        this.$router.push({name: 'follow-list', params: {id: this.memberId}})
      },
      gotoFansList() {
        this.$router.push({name: 'fans-list', params: {id: this.memberId}})
      },
      getMemberInfo(memberId) {
        this.$request.getBlogMemberInfo(memberId).then(data => {
          this.memberInfo = data
        })
      },
      addFollow() {
        this.$request.addFollow(this.memberId).then(data => {
          this.$toast('关注成功')
          this.memberInfo.is_follow = true
          this.memberInfo.fans_num = parseInt(this.memberInfo.fans_num || 0) + 1
        }).catch(e => {
          this.$toast('关注失败:' + e.msg)
        })
      },
      delFollow() {
        this.$messageBox.confirm(`你确定要取消关注吗?`).then(action => {
          this.$request.delFollow(this.memberId).then(data => {
            this.$toast('取消关注成功')
            this.memberInfo.is_follow = false
            this.memberInfo.fans_num = parseInt(this.memberInfo.fans_num || 0) - 1
          }).catch(e => {
            this.$toast('取消关注失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      showImg(imgList, index) {
        imgPreview({imgList: imgList, index: index})
      },
      getImgListWH(imgList) {
        for (let i = 0; i < imgList.length; i++) {
          this.$utils.imgLoaded(imgList[i].src).then(img => {
            imgList[i].w = img.width
            imgList[i].h = img.height
          })
        }
      },
      getDiaryList(page, pageSize) {
        this.diaryList.loading = true
        this.$request.getMemberDiaryList(page, pageSize, this.memberId).then(data => {
          if (data.length < this.diaryList.pageSize) {
            this.diaryList.allLoaded = true
          }
          for (let i = 0; i < data.length; i++) {
            if (!data[i].images) {
              continue
            }
            data[i].imgList = [] // 新定义一个数组列表，格式为photeswipe所需要的格式
            for (let j = 0; j < data[i].images.length; j++) {
              console.log(data[i].images[j])
              let src = this.$config.imgsite + this.$config.uploadImgSrc + data[i].images[j] + '_gdw640'
              let img = {src: src, w: 800, h: 600} // 设置为photeswipe 需要的格式，先给图片个默认宽高
              data[i].imgList.push(img)
            }
            this.getImgListWH(data[i].imgList) // 异步获取图片的实际宽高
          }
          this.diaryList.data = [...this.diaryList.data, ...data]
        }).finally(() => {
          this.diaryList.requested = true
          this.diaryList.loading = false
        })
      },
      getArticleList(page, pageSize) {
        this.articleList.loading = true
        this.$request.getMemberArticleList(page, pageSize, this.memberId).then(data => {
          if (data.length < this.articleList.pageSize) {
            this.articleList.allLoaded = true
          }
          this.articleList.data = [...this.articleList.data, ...data]
        }).finally(() => {
          this.articleList.requested = true
          this.articleList.loading = false
        })
      },
      loadMoreArticle() {
        if (this.showType != '1') {
          return
        }
        if (this.articleList.loading || this.articleList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getArticleList(++this.articleList.page, this.articleList.pageSize)
        }, 500)
      },
      loadMoreDiary() {
        if (this.showType != '0') {
          return
        }
        if (this.diaryList.loading || this.diaryList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getDiaryList(++this.diaryList.page, this.diaryList.pageSize)
        }, 500)
      },
      delDiary(id) {
        this.$messageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.delDiary(id).then(data => {
            this.$toast('删除成功')
            this.diaryList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
            this.getDiaryList(this.articleList.page, this.articleList.pageSize)
          }).catch(e => {
            this.$toast('删除失败：' + e.msg)
          })
        }).catch(() => {
        })
      },
      gotoEditArticle() {
        if (this.currentEditArticle == '1') {
          this.$toast('该文章为系统文章，请到后台编辑')
          return
        }
        this.articleTmp = this.currentEditArticle
        this.$router.push({name: 'article-edit', params: {id: this.currentEditArticle.id}})
      },
      delArticle() {
        this.$messageBox.confirm('确定删除?').then(action => {
          this.$request.delArticle(this.currentEditArticle.id).then(data => {
            this.$toast('删除成功')
            this.articleList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
            this.getArticleList(this.articleList.page, this.articleList.pageSize)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>

</style>